<template>
	<view>
		<view class="reg shadow-warp">
			<view class="text-black text-bold text-xl" style="text-align: center;padding: 20rpx 0;">用户注册</view>
			<view style="border-bottom: 5rpx #54b7f3 solid;"></view>
			<uni-forms ref="baseForm" :modelValue="formData" :border="true">
				<uni-forms-item name="userName">
					<view class="form-item">
						<uni-icons type="person" size="24"></uni-icons>
						<uni-easyinput v-model="formData.userName" placeholder="请输入用户名" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="password">
					<view class="form-item">
						<uni-icons type="locked" size="24"></uni-icons>
						<uni-easyinput v-model="formData.password" type="password" placeholder="请输入密码" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="confirmPwd">
					<view class="form-item">
						<uni-icons type="locked-filled" size="24"></uni-icons>
						<uni-easyinput v-model="formData.confirmPwd" type="password" placeholder="请确认密码" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="phonenumber">
					<view class="form-item">
						<uni-icons type="phone" size="24"></uni-icons>
						<uni-easyinput v-model="formData.phonenumber" placeholder="请输入手机" />
					</view>
				</uni-forms-item>

<!-- 				<uni-forms-item name="code">
					<view class="form-item">
						<view class="iconfont icon-code icon"></view>
						<uni-easyinput v-model="formData.code" placeholder="请输入验证码" />
						<image :src="codeUrl" @click="getCode" class="login-code-img" style="width: 40%;"></image>
					</view>
				</uni-forms-item> -->
			</uni-forms>
			

			<view class="text-center" style="font-size: 22rpx;">
				<u-checkbox-group v-model="isCheck" @change="changeCheck" size="12px" label-size="12px">
					<u-checkbox shape="square" :name="1">
					</u-checkbox>
					您已阅读并同意
					<text @click="handlePrivacy" class="text-blue">《用户服务及隐私协议》</text>
				</u-checkbox-group>
			</view>
			<view class="card-actions" style="margin-bottom: 8px;">
				<view class="button-group" style="padding:  16rpx 0;">
					<button class="block bg-blue lg round" @click="determine()">注册
					</button>
				</view>
				<view class="text-center" style="padding-bottom: 20rpx;">
					<text>已有账号</text>
					<text @click="toLogin" class="text-blue">立即登录</text>
				</view>
			</view>
			
            <!-- 隐私弹窗 -->
			<view >
				<u-modal :show="show" :title="title" confirmText="同意" cancelText="不同意" 
				showConfirmButton showCancelButton @confirm="confirm" @cancel="cancel">
					<view class="slot-content">
						请您仔细阅读并充分理解相关条款，点击同意即代表您已阅读并同意
						<text @click="handleUserAgrement" class="text-blue">《用户服务协议》</text>
						与
						<text @click="handlePrivacy" class="text-blue">《随私协议》</text>
					</view>
				</u-modal>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		registerUser
	} from '@/api/system/user'
	import {
		getCodeImg
	} from '@/api/login'

	export default {
		data() {
			return {
				show:false,
				title:'温馨提示',
				globalConfig: getApp().globalData.config,
				captchaEnabled: true,
				codeUrl: '',
				// 基础表单数据
				formData: {
					userName: '',
					password: '',
					phonenumber: '',
					captcha: '',
					code: '',
					uuid: '',
					userType: 1
				},
				rules: {
					userName: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名,以字母或数字开头，6至20位'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value !== '') {
										var reg = /^[A-Za-z0-9]{6,20}$/;
										if (!reg.test(value)) {
											callback('请输入6至20位，以字母或数字开头');
										}
									} else {
										callback();
									}
								}
							},
						],
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
								trigger: 'blur'
							},
							{
								minLength: 6,
								maxLength: 12,
								errorMessage: '长度在 6 到 12 个字符',
								trigger: 'blur'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value === '') {
										callback('请输入密码');
									} else {
										callback();
									}
								}
							},
						],
					},
					confirmPwd: {
						rules: [{
								required: true,
								errorMessage: '请确认密码',
								trigger: 'blur'
							},
							{
								minLength: 6,
								maxLength: 12,
								errorMessage: '长度在 6 到 12 个字符',
								trigger: 'blur'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value === '') {
										callback('请再次输入密码');
									} else if (value !== data.password) {
										callback('两次输入密码不一致!');
									} else {
										callback();
									}
								}
							}
						],
					},
					phonenumber: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value !== '') {
										var reg =
											/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
										if (!reg.test(value)) {
											callback('请输入有效的手机号码');
										}
									} else {
										callback();
									}
								}
							},
						],
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}]
					},
				},
				isCheck: [],
				range: [{
					"value": 0
				}]
			}
		},
		created() {},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.baseForm.setRules(this.rules)
			//this.getCode();
		},
		methods: {
			confirm(){
				this.show = false
			},
			cancel(){
				this.show = false
				this.isCheck = []
			},
			changeCheck(v){
				if(v[0]===1){
					this.show = true
				}
			},
			// 隐私协议
			handlePrivacy() {
			  this.$tab.navigateTo("/pages/privacy")
			},
			// 用户协议
			handleUserAgrement() {
				this.$tab.navigateTo("/pages/protocol")
			},
			// 获取图形验证码
			getCode() {
				getCodeImg().then(res => {
					this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
					if (this.captchaEnabled) {
						this.codeUrl = 'data:image/gif;base64,' + res.img
						this.formData.uuid = res.uuid
					}
				})
			},
			determine() {
				let that = this
				if (this.isCheck.length === 0) {
					this.$modal.msg("请同意并接受服务协议");
				} else {
					uni.showLoading()
					this.$refs.baseForm.validate().then(res => {
						registerUser(that.formData).then(res => {
							if (res.code == 200) {
								uni.hideLoading()
								that.$modal.loading("注册成功,前往登录...")
								setTimeout(() => {
									that.toLogin()
								}, 2000)
							} else {
								that.getCode()
								that.$modal.loading(res.msg)
							}
						})
					}).catch(err => {
						uni.hideLoading()
					})
				}
			},
			/**
			 * 转到登录页面
			 */
			toLogin() {
				this.$tab.navigateBack('/pages/login')
			},
		},
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-image: url('https://fziot.zheyun.top:9021/static/image/backreg.png');
		background-repeat: no-repeat;
		min-height: 100%;
		background-size: cover;
		height: auto;
	}
</style>

<style scoped lang="scss">
	.reg{
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
		border-radius: 25rpx;
		background-color: #fff;
		padding: 0 40rpx;
	}
	
	.button-group {
		width: 80%;
		margin: 0 auto;
	}

	uni-image {
		height: 150px
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	/deep/ .is-input-border {
		border: none;
	}

	.text-center {
		font-size: 12px;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box {
		margin-right: 0px
	}

	.iconfont {
		font-size: 44rpx;
	}

	/deep/ .uni-card .uni-card__content[data-v-19622063] {
		color: black;
	}

	.login-code-img {
		height: 80rpx;
	}
</style>
